<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自动扩展文本框高度</title>
    <script type="text/javascript" src="../js/jquery.js"></script>
    <script type="text/javascript">
        $(function(){
            $("#words").on("input propertychange",function(e){
                var target = e.target;
                var dh = $(target).attr('defaultHeight') || 0;
                if (!dh) {
                    dh = target.clientHeight;
                    $(target).attr('defaultHeight', dh);
                }

                target.style.height = dh + 'px';
                var clientHeight = target.clientHeight;
                var scrollHeight = target.scrollHeight;
                if (clientHeight !== scrollHeight) {
                    target.style.height = scrollHeight + 10 + "px";
                }
            });
        });

    </script>
</head>
<body style="text-align: center">
    <label><h3>请输入：</h3></label><br>
    <textarea id="words" name="words" style="width: 300px;height: 30px;" default-height="20px"></textarea>
</body>
</html>